<template>
  <el-tooltip :content="$t('msg.navBar.guide')">
    <svg-icon id="guide-start" name="guide" @click="onClick" class="guideIcon" />
  </el-tooltip>
</template>

<script setup>
import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/modules/app'
const appStore = useAppStore()
const i18n = useI18n()
import steps from './steps'
import { onMounted, watch } from 'vue'
let driverObj = null
const onClick = () => {
  driverObj.drive()
}
onMounted(() => {
  driverObj = driver({
    doneBtnText: i18n.t('msg.guide.close'),
    nextBtnText: i18n.t('msg.guide.next'),
    prevBtnText: i18n.t('msg.guide.prev'),
    showProgress: true,
    progressText: '{{current}}/{{total}}',
    steps: steps(i18n)
  })
})
watch(
  () => appStore.language,
  () => {
    driverObj = driver({
      closeBtnText: i18n.t('msg.guide.close'),
      nextBtnText: i18n.t('msg.guide.next'),
      prevBtnText: i18n.t('msg.guide.prev'),
      showProgress: true,
      steps: steps(i18n)
    })
  }
)
</script>

<style lang="scss" scoped>
.guideIcon {
  margin-right: 10px;
  cursor: pointer;
}
</style>
